<script setup>
import {ref, toRefs} from 'vue';
import {ElMessage} from "element-plus";

const emit = defineEmits(['submit', 'edit'])
const props = defineProps({
  dialogobject: {
    type: Object,
    default: () => ({
      dialogVisible: true,
      title: '',
      width: '',
      successBtnText: '',
      closeBtnText: '',
      isFooter: true
    })
  },
  formlist: {
    type: Array,
  },
  model: {
    type: Object
  }
})
const {
  dialogVisible,
  title,
  width,
  successBtnText,
  closeBtnText,
  isFooter
} = toRefs(props.dialogobject)

// 绑定表单
const formRef = ref()
// 提交表单
const successClick = (formRef) => {
  console.log(props.dialogobject.title)
  if (props.dialogobject.title === '建档') {
    console.log(formRef)
    if (!formRef) return false;
    formRef.validate((valid) => {
      if (valid) {
        console.log('props.model', props.model)
        emit('submit', props.model)
      } else {
        ElMessage.error('还有信息没填写完')
        return false
      }
    })
  } else {
    console.log('开始编辑')
    if (!formRef) return false
    formRef.validate((valid) => {
      if (valid) {
        emit('edit', props.model)
      } else {
        ElMessage.error('还有信息填写为空')
        return false
      }
    })

  }
}


// 关闭表单
const closeClick = () => {
  props.dialogobject.dialogVisible = false
}

// 关闭回调清空对话框里面的数据和校验规则
const handleClose = () => {
  formRef.value.resetFields()
  formRef.value.clearValidate()
}

// 时间选择器
const disabledDate = (time) => {
  return time.getTime() > Date.now()
}


</script>

<template>
  <div class="lz-dialog">
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        :width="width"
        :before-close="close"
        draggable
        :destroy-on-close="true"
        @close="handleClose"
    >
      <el-form :model="props.model" ref="formRef">
        <template v-for="(item, index) in props.formlist" :key="index">
          <!-- 下拉框 -->
          <el-form-item :label="item.label" v-if="item.type === 'select'" :rules="item.rules" :prop="[item.field]">
            <el-select v-model="model[item.field]" :placeholder="item.options?.placeholder || '请选择'" clearable>
              <el-option v-for="s in item.options?.data" :key="s[item.options?.valueKey || 'value']"
                         :label="s[item.options?.labelkey || 'label']" :value="s[item.options?.valueKey || 'value']"/>
            </el-select>
          </el-form-item>
          <!--          上传图片         -->
          <el-form-item :label="item.label" v-else-if="item.type === 'pic'" :rules="item.rules" :prop="[item.field]">
            <slot name="pictures"></slot>
          </el-form-item>
          <!--          时间选择器-->
          <el-form-item :label="item.label" :rules="item.rules" :prop="[item.field]" v-else-if="item.type==='date'">
            <el-date-picker
                v-model="model[item.field]"
                type="date"
                placeholder="请选择日期"
                size="default"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                :disabled-date="disabledDate"
            />
          </el-form-item>
<!--          不限制后面的时间的picker        -->
          <el-form-item :label="item.label" :rules="item.rules" :prop="[item.field]" v-else-if="item.type==='alldate'">
            <el-date-picker
                v-model="model[item.field]"
                type="date"
                placeholder="请选择日期"
                size="default"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <!-- 默认输入框 -->
          <el-form-item :label="item.label" :rules="item.rules" :prop="[item.field]" v-else>
            <el-input v-model="model[item.field]" :readonly="item.readonly" :type="item.type ?? 'text'"
                      :placeholder="item.label" :disabled="item.disabled"/>
          </el-form-item>
        </template>
        <slot name="checkpet"></slot>
      </el-form>

      <template #footer>
        <span v-if="isFooter" class="dialog-footer">
          <el-button class="btn-mixins-clear-default" type="success" @click="successClick(formRef)">{{
              successBtnText
            }}</el-button>
          <el-button class="btn-mixins dia-suc" type="primary" @click="closeClick">{{ closeBtnText }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<style scoped>

</style>